<template>
  <div>
    <con-title :topTitle="topTitle"></con-title>

    <el-tabs
      type="border-card"
      class="search_inp"
      v-model="query.agreement"
      @tab-click="changeTabFun"
    >
      <el-tab-pane label="所有设备" name="all"> </el-tab-pane>
      <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
      <el-tab-pane label="NB-IoT" name="NB-IoT"></el-tab-pane>
      <el-tab-pane label="4G/2G" name="4G/2G"></el-tab-pane>
      <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>

      <!-- 搜索验证表单 -->
      <el-form label-width="100px">
        <!-- eui搜索 -->
        <el-form-item label="EUI:">
          <el-input
            v-model.trim="query.eui"
            class="input-width"
            placeholder="设备EUI"
          ></el-input>
        </el-form-item>
        <!-- 设备群组 -->
        <el-form-item label="设备群组:">
          <el-input
            v-model.trim="query.devGroup"
            class="input-width"
            placeholder="设备群组"
          ></el-input>
        </el-form-item>

        <!-- 在线状态  下拉列表 -->
        <el-form-item label="在线状态：">
          <el-select
            v-model="query.online"
            placeholder="请选择"
            class="input-width"
          >
            <el-option
              v-for="item in options"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 绑定时间 -->
        <el-form-item label="绑定时间:">
          <el-date-picker
            v-model="query.date"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 按钮组 -->
        <el-form-item
          ><el-button-group size="mini">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="searchFun"
              >搜索</el-button
            >
            <el-button type="primary" size="mini" icon="el-icon-delete"
              >清除条件</el-button
            >
            <el-button type="primary" size="mini" icon="el-icon-refresh"
              >刷新</el-button
            >
          </el-button-group>
          <span class="result">搜索结果：{{ total }}</span>
        </el-form-item>
      </el-form>
    </el-tabs>
    <!-- 表格 -->
    <el-card class="box-card">
      <el-table :data="sensorList" style="width: 100%">
        <el-table-column type="index" label="序号" width="100">
        </el-table-column>

        <el-table-column prop="eui" label="EUI" width="180"> </el-table-column>
        <el-table-column prop="name" label="设备名称" width="180">
        </el-table-column>
        <el-table-column prop="nums" label="传感器通道"> </el-table-column>
        <el-table-column prop="devGroup" label="设备群组"> </el-table-column>
        <el-table-column prop="loop" label="上报周期(分钟)"> </el-table-column>
        <el-table-column prop="mhz" label="频率(MHz)"> </el-table-column>
        <el-table-column label="在线状态">
          <template slot-scope="scope">
            {{ scope.row.online | onlineType }}
          </template>
        </el-table-column>
        <el-table-column label="绑定时间">
          <template slot-scope="scope">
            {{ scope.row.bTime | Btime }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="goPage">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $sensor_List } from "@/api";

export default {
  components: { ConTitle },
  name: "sensorList",
  data() {
    return {
      topTitle: {
        type: "设备", //type如果有内容就会显示上一级
        text: "传感器列表",
        msg: "展示——————————————————————————————————————",
      },
      input: "",
      sensorList: [],
      total: 0, //总条数
      query: {
        currPage: 1, //页码
        pageSize: 5, //当前页有多少条数据
        eui: "",
        online: "",
        agreement: "all",
        date: [],
      },
      options: [
        //在线状态下拉列表选项
        { value: "all", label: "全部" },
        { value: true, label: "在线" },
        { value: false, label: "离线" },
      ],
    };
  },
  methods: {
    getSensorList() {
      $sensor_List(this.query).then((res) => {
        console.log(res);
        this.sensorList = res.data.data;
        this.total = res.data.total;
      });
    },
    changeTabFun() {
      // 重新搜索数据
      this.getSensorList();
    },
    //当页面上显示的数据条数发生变化时会触发这个函数
    handleSizeChange(count) {
      console.log("页面的条数发生变化了", count);
      //将页面显示条数赋值给 pageSize
      this.query.pageSize = count;
      this.query.currPage = 1;
      //重新获取数据
      this.getSensorList();
    },
    //翻页会触发的函数
    handleCurrentChange(page) {
      console.log("翻页了", page);
      // 修改当前页的页码
      this.query.currPage = page;
      //重新获取数据
      this.getSensorList();
    },
    searchFun() {
      this.getSensorList();
    },
  },
  mounted() {
    this.getSensorList();
  },
  filters: {
    onlineType(value) {
      return value ? "在线" : "离线";
    },
    Btime(val) {
      let d = new Date(+val);
      return (
        d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.search_inp {
  margin: 10px;
}
.goPage {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.box-card {
  margin: 10px;
}
.input-width {
  width: 300px;
}
</style>